<template>
  <view class="address-management-layout">
    <van-address-list
      v-model="chosenAddressId"
      :list="addressList"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="showAddAddressPopup"
      @edit="showEditAddressPopup"
    />
    
    <!-- 新增地址弹窗 -->
    <van-popup v-model:show="showAddPopup" position="bottom" round>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">新增地址</text>
          <van-icon name="cross" size="20" @click="closePopup" />
        </view>
        <!-- 地址表单内容 -->
        <view class="popup-form">
          <!-- 这里添加地址表单字段 -->
        </view>
        <view class="popup-footer">
          <PrimaryButton text="保存" @click="saveAddress" padding-t-b="17rpx"/>
        </view>
      </view>
    </van-popup>
    
    <!-- 编辑地址弹窗 -->
    <van-popup v-model:show="showEditPopup" position="bottom" round>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">编辑地址</text>
          <van-icon name="cross" size="20" @click="closePopup" />
        </view>
        <!-- 地址表单内容 -->
        <view class="popup-form">
          <!-- 这里添加地址表单字段 -->
        </view>
        <view class="popup-footer">
          <PrimaryButton text="保存" @click="saveAddress" padding-t-b="17rpx"/>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import PrimaryButton from '@/components/PrimaryButton.vue'

// 当前选中的地址ID
const chosenAddressId = ref('')

// 地址列表
const addressList = ref([
  {
    id: '1',
    name: '张三',
    tel: '13000000000',
    address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
    isDefault: true,
  },
  {
    id: '2',
    name: '李四',
    tel: '1310000000',
    address: '浙江省杭州市拱墅区莫干山路 50 号',
  },
])

// 禁用的地址列表
const disabledList = ref([
  {
    id: '3',
    name: '王五',
    tel: '1320000000',
    address: '浙江省杭州市滨江区江南大道 15 号',
    isDisabled: true,
  },
])

// 弹窗显示状态
const showAddPopup = ref(false)
const showEditPopup = ref(false)

// 显示新增地址弹窗
const showAddAddressPopup = () => {
  showAddPopup.value = true
}

// 显示编辑地址弹窗
const showEditAddressPopup = (item) => {
  // 可以在这里设置编辑地址的数据
  showEditPopup.value = true
}

// 关闭弹窗
const closePopup = () => {
  showAddPopup.value = false
  showEditPopup.value = false
}

// 保存地址
const saveAddress = () => {
  // 处理保存逻辑
  closePopup()
}

</script>

<style scoped lang="scss">
.address-management-layout {
  min-height: 100vh;
  background-color: #f7f8fa;
  
  // 修改主要颜色
  --primary-color: #1a1617;
  
  .van-address-list {
    :deep(.van-button) {
      background-color: var(--primary-color);
      color: #fff;
    }
    
    :deep(.van-tag) {
      background-color: var(--primary-color);
      color: #fff;
    }

    :deep(.van-address-item .van-radio__icon--checked .van-icon) {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
    }
  }
}

// 弹窗样式
.popup-content {
  padding: 30rpx;
  background-color: #fff;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }
  
  .popup-form {
    // 表单样式
  }
  
  .popup-footer {
    margin-top: 30rpx;
    text-align: center;
  }
}
</style>